<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .globalSearch-header-left {
          position: absolute;
          width: 0.32rem;
          height: 0.6rem;
          position: absolute;
          left: 0.32rem;
          top: 0.12rem;
      }
      .globalSearch-header-left img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
      }
      .globalSearch-header-right {
          position: absolute;
          right: 0.32rem;
          /* height: 0.52rem; */
          top: 0.12rem;
      }
      .globalSearch-header-right img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.2rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .globalSearch-realtimeinfo {
          /* margin:0.3rem 0; */
          padding-top: 1.1rem;
      }
      .globalSearch-realtimeinfo-list ul {
          padding: 0;
          margin: 0;
          list-style: none;
      }
      .globalSearch-realtimeinfo-list ul li:first-child{
        margin-top: 0;
      }
      .globalSearch-realtimeinfo-list ul li .list-left{
            display: inline-block;
            /* min-height: 2rem; */
      }
      .globalSearch-realtimeinfo-list ul li .list-right{
          position: absolute;
          right: 0.32rem;
          top: 0rem;
          display: inline-block;
          width: 2rem;
          height: 1.64rem;
          /* background:pink; */
      }
      .globalSearch-realtimeinfo-list ul li .list-right img{
          width: 2rem;
          height: 1.64rem;
      }
      .globalSearch-realtimeinfo-subexplain span:nth-child(2){
        font-family: PingFangSC-Regular;
        font-size: 0.24rem;
        color: #5F89BA;
        letter-spacing: 0;
        text-align: left;
        line-height: 0.34rem;
      }
      /*  */
      .globalSearch-header {
    height: 1.1rem;
    padding: 0.12rem 0.32rem 0.38rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
.globalSearch-header-right input{
  padding-left: 0.6rem;
  width: 5rem;
  border-radius: 0.04rem;
  border-radius: 0.04rem;
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
  letter-spacing: 0;
  text-align: left;
  margin-right: 0.3rem;
  line-height: normal;
}
.globalSearch-realtimeinfo-list ul li{
  padding: 0 0.32rem;
  box-sizing: border-box;
  margin-top: 0.36rem;
  position: relative;
}
.list-left-top {
  width: 4.52rem;
  font-family: PingFangSC-Medium;
  font-size: 0.3rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.44rem;
  margin-bottom: 0.42rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.list-left-bottom{
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
  text-align: left;
}
.globalSearch-realtimeinfo-subexplain {
  height: 0.52rem;
  border-radius:0.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  line-height: 0.52rem;
  text-align: center;
  height: 0.52rem;
  width: 1.8rem;
}
.globalSearch-realtimeinfo-subexplain span:nth-child(1){
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.34rem;
}
.globalSearch-realtimeinfo-seeAll {
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
}
 .globalSearch-header-right input[type="search"]{-webkit-appearance:none;}
   .globalSearch-header-right [type="search"]::-webkit-search-decoration {
    display: none;
}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->

  <!-- 头部 -->
  <div class="globalSearch-header">
      <div class="globalSearch-header-left">
          <img src="../../images/allPic/jiantou.png" alt="" onclick="closeWindow()" class="headerimg">
      </div>
      <div class="globalSearch-header-right">
       <form action="javascript:;" id="searchFrom">
          <img src="../../images/allPic/chaxun.png" alt="">
          <input type="search" placeholder="请输入您感兴趣的内容" id='mainipt'>
          <span onclick="searchList()" style='vertical-align: middle;'>搜索</span>
        </form>
      </div>
  </div>

  <!-- 资讯 -->
  <div class="globalSearch-realtimeinfo">
    <div class="globalSearch-realtimeinfo-list">
        <ul>
        </ul>
    </div>
  </div>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let searchWord
  let pm = {isScroll:false}
  const typesMap={
    '2':{
      placeholder: '请输入证券代码或简称',
      urlFnName: 'getSConsultingSearchList'
    }
  }
  let urlFnName = 'getSearchList'
  // $('#mainipt').trigger("focus")
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    // $('#mainipt').trigger("click").focus()
    //设置深色模式
    if(configColorType === '1'){
      bridgeUtils.loadCss('../../css/theme/default/black.css')
      $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
      bridgeUtils.loadCss('../../css/theme/white/white.css')
      $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }
    let typeObj = typesMap[params.type];
    if (typeObj) {
      $('#mainipt').attr('placeholder', typeObj.placeholder)
      urlFnName = typeObj.urlFnName
    }
    searchWord = params.searchWord
    if(searchWord){
      $('#mainipt').val(searchWord)
      getList({'searchWord':searchWord,'pageNum':pageNum})
    }

    $('#searchFrom').bind('submit', function () {
          searchList()
    });

  }



  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {

  }
  //节流
  let prev = Date.now()
  function throttle (fn, delay) {
  const now = Date.now()
  if (now - prev > delay) {
      fn()
      prev = Date.now()
  }
}
  //点击搜索按钮
  function searchList(){
    document.activeElement.blur();
    throttle(() => {
      pageNum = 1
      pm.isScroll = false
      $('.globalSearch-realtimeinfo-list ul').empty()
      searchWord = $('#mainipt').val().trim()
      // console.log(searchWord)
      if(searchWord){
        getList({'searchWord':searchWord,'pageNum':pageNum})
      }else{
        jsBridge.toast('搜索内容不能为空...')
      }
    },1000)
  }
  //获取首页搜索列表
  function getList(params){
    Server.realTimeInfo[urlFnName]({'searchWord':params.searchWord,'pageNum':params.pageNum,'pageSize':10}).then(res => {
      if(res.code === 0){
        let list = res.list
        if(list.length !== 0){
          list.map((item,index) => {
            let creatTime = item.issuerDttm * 1000
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth() + 1 < 10 ? '0' + (new Date(creatTime).getMonth() + 1) : new Date(creatTime).getMonth() + 1
            let day = new Date(creatTime).getDate() < 10 ? '0' + new Date(creatTime).getDate() : new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours() < 10 ? '0' + new Date(creatTime).getHours() : new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes() < 10 ? '0' + new Date(creatTime).getMinutes() : new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30 * 60 * 1000){
              if(nowTime - creatTime < 1 * 60 * 1000){
                item.issuerDttm = '刚刚'
              }else{
                item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60) + '分钟前'
              }
            }else if(nowTime - creatTime < 24 * 60 * 60 * 1000){
              if(nowTime - creatTime < 60 * 60 * 1000){
                item.issuerDttm = '1小时前'
              }else {
                item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60 / 60) + '小时前'
              }
            }else if(new Date().getDate() - new Date(creatTime).getDate() == 1 && new Date().getMonth() == new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.issuerDttm = '昨天' + hour + ':' + minute
            }else{
              item.issuerDttm = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
            }
          })
          let li = ''
          list.map((v,i) => {
             li +=
                    `<li onclick="gozixundetails({'infoId':'${v.infoId}','infoType':'${v.infoType}','funcCode':'${v.funcCode}','trainingType':'${v.trainingType}'})">
                          <div class="list-left">
                              <div class="list-left-top" style="width:${v.coverImgUrl ? '' : '100%'}">${v.mainTitle}</div>
                              <div class="list-left-bottom" style="width:${v.coverImgUrl ? '' : '100%'}">${v.issuerDttm}</div>
                          </div>
                          <div class="list-right" style="display:${v.coverImgUrl ? 'block' : 'none'}">
                              <img src="${v.coverImgUrl}" alt="">
                          </div>
                          <div class="globalSearch-realtimeinfo-subexplain">
                              <span>来自：</span><span>${v.infoTypeStr}</span>
                          </div>
                      </li>`

          })
          if(pageNum === 1){
            $('.globalSearch-realtimeinfo-list ul').html(li)
          }else{
            $('.globalSearch-realtimeinfo-list ul').append(li)
          }

          pm.isScroll = true
        }else if(list.length === 0 && pageNum === 1){
          jsBridge.toast('暂无数据')
          pm.isScroll = false
        }else{
          pm.isScroll = false
        }
      }
    }).catch(err => {
      pm.isScroll = true
    })
  }
  //点击某一项去资讯详情页面
  function gozixundetails(params){
    if(params.infoType === '1'){
      jsBridge.openWindow('/html/details/Information-details.html?infoId=' + params.infoId + '&infoType=' + params.infoType + '&funcCode=' + params.funcCode + '&isopencomment=0',{}, {noBar: false})
    }else if(params.infoType === '2'){
      //trainingType 1、直播 2、录播  3、短视频
      if('1' === params.trainingType){
        jsBridge.openVideo({'infoId':params.infoId,'resourceType':'1'})
      }else if('2' === params.trainingType){
        jsBridge.openWindow('/html/video/videoplay.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
      }else{
        jsBridge.openVideo({'infoId': params.infoId, 'resourceType': params.trainingType || '3'})
      }
    }else if(params.infoType === '7'){
      jsBridge.openWindow('/html/details/newsflash-details.html?infoId=' + params.infoId,{}, {noBar: false})
    }else if(params.funcCode === '005005'){
      jsBridge.openWindow('/html/hearsay/hearsaydetails.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }else if(params.funcCode === '005001'){
      jsBridge.openWindow('/html/interaction/Interactiondetails.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }else if(params.funcCode === '005002'){
      jsBridge.openWindow('/html/phonation/phonationdetails.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }else if(params.funcCode === '005003'){
      jsBridge.openWindow('/html/interview/interviewdetails.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }else if(params.funcCode === '005004'){
      jsBridge.openWindow('/html/topic/topicdetails.html?infoId=' + params.infoId + '&isopencomment=0&isorign=1',{}, {noBar: false})
    }
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.globalSearch-realtimeinfo-list ul').offset().top
    let height = $('.globalSearch-realtimeinfo-list ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()

    if(Math.round(top + height - maxHeight) - Math.round(scroll) < 100 && pm.isScroll ){
      pm.isScroll = false
      pageNum++
      getList({'searchWord':searchWord,'pageNum':pageNum})
    }
  })
</script>
</html>
